<template>
	<div class="uploadimgs">
		<div v-if='list.length' style="display: inline-block;width: 285px;overflow-y: hidden;overflow-x: auto;">
			<div :style="{width: list.length*60+'px'}">
				<div class="imgbox" :style="{backgroundImage:'url('+item+')'}" v-for='(item,i) in list' @mouseover="mouse=i" @mouseout="mouse=-1">
					<div :class="{mouse:mouse==i}" style="display: none;" @click="del(i)">
						<Icon type="ios-trash" color='#fff' size='50' class='icon' />
					</div>
				</div>
			</div>

		</div>
		<m-upload @click="aaa" :style='{display:list.length?"block":"inline-block"}'>
			<slot></slot>
		</m-upload>
	</div>
</template>

<script type="text/ecmascript-6">
	import { uploadImg } from 'api'
	import MUpload from './upload'
	import Btn from 'C/btn'
	export default {
		props: ['imgs'],
		components: {
			MUpload,
			Btn
		},
		data() {
			return {
				list: this.imgs || [],
				mouse: -1
			}
		},
		mounted() {},
		methods: {
			aaa(e) {
				var data = new FormData();
				data.append('file', e)
				data.append('name', 'n')
				uploadImg(data).then(res => {
					this.list.push(res.data.data)
					this.$emit('imgs', this.list)
				})
			},
			del(e) {
				this.list.splice(e, 1)
				this.$emit('imgs', this.list)
			},
		},
		computed: {}
	}
</script>

<style lang="scss" scoped>
	.uploadimgs {
		display: inline-block;
		.imgbox {
			position: relative;
			display: inline-block;
			margin-right: 10px;
			width: 50px;
			height: 50px;
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.mouse {
			position: absolute;
			display: block!important;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.5
		}
	}
</style>